import { defineConfig, normalizePath } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import viteEslint from 'vite-plugin-eslint';
import viteImagemin from 'vite-plugin-imagemin';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { visualizer } from 'rollup-plugin-visualizer';
import legacy from '@vitejs/plugin-legacy';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
const variablePath = normalizePath(path.resolve('./src/styles/variable.scss'));

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteEslint(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
      // 指定symbolId格式
      symbolId: '[name]'
    }),
    //图片压缩
    viteImagemin({
      // 无损压缩配置，无损压缩下图片质量不会变差
      optipng: {
        optimizationLevel: 7
      },
      // 有损压缩配置，有损压缩下图片质量可能会变差
      pngquant: {
        quality: [0.8, 0.9]
      },
      // svg 优化
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    }),
    //指定拆包策略
    chunkSplitPlugin({
      customSplitting: {
        //1.支持包名。'vue'会被打包到名为vue-vendor的chunk里面包括他们的依赖
        'vue-vendor': ['vue'],
        //2.支持正则表达式.src中components和utils下所有文件都会被打包为components-util的chunk中
        'components-util': [/src\/components/, /src\/utils/]
      }
    }),
    legacy({
      // 设置目标浏览器，browserslist 配置语法
      target: ['Chrome > 31', 'ff > 31', 'ie >= 11']
    }),
    visualizer({
      // 打包完成后自动打开浏览器，显示产物体积报告
      open: true
    })
  ],
  resolve: {
    alias: {
      '@assets': path.join(__dirname, 'src/assets'),
      '@': path.join(__dirname, 'src')
    },
    extensions: ['.js', '.vue', '.scss']
  },
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData 的内容会在每个 scss 文件的开头自动注入
        additionalData: `@import "${variablePath}";`
      }
    }
  },
  optimizeDeps: {
    // 配置为一个字符串数组，将 `lodash` 和 `vue`两个包强制进行预构建
    include: [
      //按需加载的依赖都可以声明在这个数组里以避免二次预构建
      'lodash',
      'vue'
    ]
  },
  //构建选项
  build: {
    target: 'es6',
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue'],
          library: ['element-plus']
        }
      }
    }
  }
});
